<html http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8>
<head>
<style type="text/css">
.barup {
border: 1px solid black;
color: black;
background-color: white;
text-align: left;
font-size: 12px;
padding-right:1px;
border-top:0px;
}

.bardown {
border: 1px solid black;
color: black;
background-color: white;
text-align: left;
font-size: 12px;
padding-right:1px;
border-bottom:0px;
}

.align {
/*border: 1px solid black;*/
color: black;
background-color: white;
text-align: left;
font-size: 14px;
padding-right:1px;
height: auto;
margin-bottom:20px;
display:bloc;
}

.al_row {
height: 40px;
/*border: 1px solid black;*/
}

.cell_on {
background-color: #ff9300;
margin:5px;
}

.cell_off {
background-color: #16ff3b;
margin:5px;
}

.onlyA { background-color: #14a1ee }
.onlyB { background-color: #17ff6d }
.AandB { background-color: #ffff5b }
.src { color: black; padding: 5px; background-color: #eeeeee }
.ref { color: black; padding: 5px; background-color: #cccccc }
.tst1 { color: black; padding: 5px; background-color: #ccffcc }
.tst2 { color: black; padding: 5px; background-color: #ffcccc }

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	/*height: 285px;*/
	height: 400px;
	overflow: auto;
	/*width: 756px*/
	width: auto;
}
 
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	/*width: 756px*/
	width: auto;
}
 
/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	width: 740px
}
 
/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	width: 756px
}
 
/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
	position: relative
}
 
/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
	display: block
}
 
/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left;
}
 
/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
	color: #FFF;
	display: block;
	text-decoration: none;
	width: 100%
}
 
/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
	color: #FFF;
	display: block;
	text-decoration: underline;
	width: 100%
}
 
/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
	display: block;
	/*height: 262px;*/
	height: 400px;
	overflow: auto;
	width: 100%;
}
 
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}
 
tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}
 
/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body thead.fixedHeader th {
	width: 80px;
}
 
html>body thead.fixedHeader th + th {
	width: 270px;
}
 
html>body thead.fixedHeader th + th + th {
	width: 330px;
}
 
/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body tbody.scrollContent td {
	width: 200px
}
 
html>body tbody.scrollContent td + td {
	width: 240px
}
 
html>body tbody.scrollContent td + td + td {
	width: 300px
}



</style>


<!-- <script language="javascript" src="nist.data.txt.js"></script> -->
<script language="javascript" src="data.js"></script>

<script language="javascript">

function findElement(e) {
    var theTarget = e.target;
    if( theTarget && ( e.target.nodeType == 3 || e.target.nodeType == 4 ) ) {
        theTarget = theTarget.parentNode;
    }
    return theTarget;
}

function build(measure, target, s) {
  
    var values = orig_values.slice();
    //console.debug("build : "+measure+" "+target+" "+s);
    
    if(s == 1) values.sort(function(a, b){return b[measure] - a[measure]});
    else if(s == -1) values.sort(function(a, b){return a[measure] - b[measure]});
    
    var min = 9999999;
    var max = -9999999;
    
    for(var i = 0; i < values.length; i++) {
        if(min > values[i][measure]) min = values[i][measure];
        if(max < values[i][measure]) max = values[i][measure];
    }
    
    // get column id
    var parent = document.getElementById(target);
    // remove all children of that parent
    while(parent.children.length > 0) parent.removeChild(parent.lastChild);
    
    var is_first = 1;
    for(var i = 0; i < values.length; i++) 
    {
        var width = 20 + 120 * (values[i][measure] - min) / (max - min);
        var element = document.createElement("div");
        
        if(s >= 0)
        {
        	element.className = "barup";
        }
        else
        {
        	element.className = "bardown";
        }
        element.appendChild(document.createTextNode(values[i][measure]));
        element.style.height = "14px";
        element.style.width = Math.floor(width) + "px";
        element.setAttribute('system', values[i][0]);
        
		element.setAttribute('errors', errors[i]);
		element.setAttribute('src', alignments[i][0]);
		element.setAttribute('ref', alignments[i][1]);
		element.setAttribute('tst1', alignments[i][2]);
		element.setAttribute('tst2', alignments[i][3]);
		
        element.onmouseout = function(e) 
        {
        	//console.debug('onmouseout');
        	var el = findElement(e);
            var matches = document.getElementsByTagName('div');
            var sysid = el.getAttribute('system');
            for(var j = 0; j < matches.length; j++) 
            {
                if(matches[j].getAttribute('system') == sysid) 
                {
                    matches[j].style.background = matches[j].getAttribute('old_color');
                }
            }
        };
        element.onmouseover = function(e) 
        { 
	        //console.debug('onmouseover');
        	var el = findElement(e);
            var matches = document.getElementsByTagName('div');
            var sysid = el.getAttribute('system');
            for(var j = 0; j < matches.length; j++) 
            {
                if(matches[j].getAttribute('system') == sysid) 
                {
                    matches[j].setAttribute('old_color', matches[j].style.background);
                    matches[j].style.background = "yellow";
                }
            }
            
            var err = document.getElementById('errors');
            for(var i=0; i<err.children.length; i++)
            {
            	if(el.getAttribute('errors')[i] == 0)
            	{
            		err.children[i].setAttribute('class', 'cell_off');
            	}
            	else
            	{
            		err.children[i].setAttribute('class', 'cell_on');
            	}
            }
            
            var align = document.getElementById('alignment');
            while(align.children.length > 0) align.removeChild(align.lastChild);
            
            var al = el.getAttribute('src');
            var al_el = document.createElement("div");
            al_el.setAttribute('class', 'al_row');
            //al_el.appendChild(document.createTextNode("SRC : "+al));
            al_el.innerHTML = "SRC : "+al;
            align.appendChild(al_el);
            
            align.appendChild(document.createElement('br'));
            
            al = el.getAttribute('ref');
            al_el = document.createElement("div");
            al_el.setAttribute('class', 'al_row');
            //al_el.appendChild(document.createTextNode("REF : "+al));
            al_el.innerHTML = "REF : "+al;
            align.appendChild(al_el);
            
            align.appendChild(document.createElement('br'));
            
            al = el.getAttribute('tst1');
            al_el = document.createElement("div");
            al_el.setAttribute('class', 'al_row');
            //al_el.appendChild(document.createTextNode("HYP1 : "+al));
            al_el.innerHTML = "HYP1 : "+al;
            align.appendChild(al_el);
           
            align.appendChild(document.createElement('br'));
            
            al = el.getAttribute('tst2');
            al_el = document.createElement("div");
            al_el.setAttribute('class', 'al_row');
            //al_el.appendChild(document.createTextNode("HYP2 : "+al));
            al_el.innerHTML = "HYP2 : "+al;
            align.appendChild(al_el); 
            
        };
        if(is_first == 1 && s >= 0) 
        {
            is_first = 0;
            element.style.border = "1px solid black";
        }
        else if((i == values.length-1) && s < 0)
        {
        	element.style.border = "1px solid black";
        }
        parent.appendChild(element);
    }
}

function hidecolumn(which)
{
	if (!document.getElementById)
		return
	which.style.display='none';
}

function showcolumn(which)
{
	if (!document.getElementById)
		return
	//which.style.display='table-col'
	//	which.style.display = 'inline'
	which.style.display = '';
}

function showhide() 
{
    parent = document.getElementById("data");
    for(var i=1; i < parent.children.length; i++ ) 
    {	
    	var name = parent.children[i].id;
    	if(document.getElementById("c"+name).checked) 
		{		//console.debug(name+" showed");
				showcolumn(document.getElementById(name));
				showcolumn(document.getElementById("h"+name));
		}
		else 
		{		//console.debug(name+" hidden");
				hidecolumn(document.getElementById(name));
				hidecolumn(document.getElementById("h"+name));
		}
    }	
}

function update() 
{
    for(var i = 0; i < header[0].length; i++)
    {
		//console.debug(""+header[0][i]+" "+i);    	
		build(i, header[0][i], header[1][i]);
    }
    showhide();
}

function make_checkboxes()
{
   	//console.debug("make checkboxes : "+header[0].length); 
    for(var i = 1; i < header[0].length; i++)
    {
    	var name = header[0][i];
		document.write("<input onclick='showhide();' id='c"+name+"' type='checkbox' name='metric' checked ></input>" + name);
    }
}

function make_table()
{
	document.write('<div id="tableContainer" class="tableContainer">');
	document.write('<table border="0">');
	document.write('<thead class="fixedHeader" id="headers">');
	document.write('<tr id="headers">');
	for(var i = 0; i < header[0].length; i++)
	{
		var name = header[0][i];
		//document.write("<td id='h"+name+"' >"+name+"</td>");
		document.write("<th id='h"+name+"' >"+name+"</th>");
	}
 	document.write('</tr>');
	document.write('</thead>'); 
	document.write('<tbody class="scrollContent">');
 	document.write('<tr id="data">');	
	for(var i = 0; i < header[0].length; i++)
	{
		var name = header[0][i];
		document.write("<td id='"+name+"' ></td>");
	}
	document.write('</tr>');
	document.write('</tbody>');
 	document.write('</table>');
 	document.write('</div>');
}

function make_alignment_div()
{
	document.write('<div class="align" id="alignment">');
	
	
	document.write('<div class="al_row">SRC : Can you translate that for me, please ?');
	
	document.write('</div><br/><div class="al_row">');
	document.write('REF : This is a wonderful reference , you can not beat it');
	
	//document.write('</div><br/><div class="al_row">');
	//document.write('ORA : This is a wonderful oracle , try to beat me');
	
	document.write('</div><br/><div class="al_row">');
	document.write('HYP1 : This is my previous hypothesis , I am too bad');
	
	document.write('</div><br/><div class="al_row">');
	document.write('HYP2 : This is a bettert hypothesis , great !!');
	
	document.write("</div></div>");
}

function make_errors_div()
{
	document.write('<div class="align" id="errors">ERRORS : ');
	for(var i=0; i<errors_names.length; i++)
	{
		if(errors[i]) document.write('<span class="cell_on">'+errors_names[i]+'</span>');
		else document.write('<span class="cell_off">'+errors_names[i]+'</span>');
	}
	document.write("</div>");
}

function buildpage() 
{
	//here we could make a div which includes Martin alignment
	make_alignment_div();
	make_errors_div();
	make_checkboxes();	
	make_table();
	update();
}
</script>
</head>

<body>

<script type="text/javascript">
buildpage();
</script>

<input type="submit" value="RELOAD !" />

</body>
</html>




